/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {AutoComplete, Button, DatePicker, Form, Input, InputNumber, notification, Select, Switch} from 'antd';

import {FormField, FormLayout, ModalFooter, ModalView} from 'antd-extra';
import FormBase from '../../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {connect} from "dva";
import TextArea from "antd/es/input/TextArea";
import ModalSelectContacts from "../../sales/modal/ModalSelectContacts";

moment.locale('zh-cn');

@Form.create()
@connect(({user, global, work}) => ({...user, ...work, ...global}))
export default class ModalCreateOrEditTask extends FormBase {
  constructor(props) {
    super(props);
    const {values = {}} = props;
    this.state = {...values};
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'user/findUsers',
      payload: {table: 'users'}
    });
  }

  renderFoot = () => {
    const {foot, value, modalRef, callback, table, form} = this.props;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              values.userCode = this.state.userCode;
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  getUserOpt() {
    const {users = []} = this.props;
    const temp = [];
    _.map(users, item => {
      temp.push(<Option key={item.userCode} value={item.nickname}>
        {item.nickname}
      </Option>);
    });
    return temp;
  }

  onSelectUser = (value, option) => {
    const {key} = option;
    this.state['userCode'] = key;
    this.state['username'] = value;
  };

  render() {
    let {form, footDisabled, style, table, users = []} = this.props;
    const model = this.props[`${table}Model`];
    if (!model) return <div></div>;
    const {
      code = "TSK" + moment().format("YYYYMMDDHHmmss"),
      username,
      desc, offlineMan,
      requiredCompletionDate = this.props.requiredCompletionDate,
      memo, isTimer = false
    } = this.state;

    return (
      <div style={{...style}}>
        {<FormLayout form={form} cols={1}>
          <FormField
            label={'任务编码'}
            name={'code'}
            required={true}
            disabled={true}
            initialValue={code}
          >
            <InputNumber disabled={true} style={{width: '100%'}}
            ></InputNumber>
          </FormField>
          <FormField
            label={'责任人'}
            name={'username'}
            required={true}
            initialValue={username}
          >
            <AutoComplete style={{width: '100%'}}
                          dataSource={this.getUserOpt()}
                          filterOption={(inputValue, option) =>
                            option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                          }
                          allowClear
                          onSelect={this.onSelectUser}
            >
            </AutoComplete>
          </FormField>
          <FormField
            label={'线下人员姓名'}
            name={'offlineMan'}
            initialValue={offlineMan}
          >
            <Input style={{width: '100%'}}
            ></Input>
          </FormField>
          <FormField
            label={'详细内容'}
            name={'desc'}
            initialValue={desc}
          >
            <TextArea style={{width: '100%'}}
            ></TextArea>
          </FormField>
          {!isTimer && <FormField
            label={'要求完成日期'}
            name={'requiredCompletionDate'}
            required={true}
            initialValue={moment(requiredCompletionDate)}
          >
            <DatePicker style={{width: '100%'}}
            ></DatePicker>
          </FormField>}
          <FormField
            label={'备注'}
            name={'memo'}
            initialValue={memo}
          >
            <TextArea style={{width: '100%'}}
            ></TextArea>
          </FormField>

        </FormLayout>
        }
        {!footDisabled && this.renderFoot()}
      </div>
    );
  }
}

